<script setup>
import {ref} from "vue";

const vnode = ref({
  type: 'QCard',
  props: {
    style: {width: '500px', height: '500px'}
  },
  children: [
    {type: 'QCardSection', children: [
        {type: 'QBtn', props: {label: '按钮', color: 'primary', style: {}}}
      ]}
  ]
})

const tabs = ref([
  {label: '项目', value: 'project'},
  {label: '模板库', value: 'usage'},
  {label: '属性', value: 'props'},
  {label: '事件', value: 'event'},
  {label: '样式', value: 'style'},
  {label: '标签库', value: 'tag'},
  {label: '图层', value: 'layer'},
])

const renderByJson = ref()
const currentNode = ref()
function setNode(node) {
  currentNode.value = node
}

function logData() {
  console.log(renderByJson.value.allScope.value.dataScope)
}

const formData = ref({name: 'lin'})
const currentLeftTab = ref('props')
</script>

<template>
  <div class="grid">
    <div class="header"></div>
    <div class="center">
      <div class="center-left fit">
        <SliderTabLayout :tabs="tabs" default-value="usage">
          <template #project></template>
          <template #usage><UsageArea></UsageArea></template>
          <template #props><PropsArea v-if="currentNode" :currentNode="currentNode" :dataScope="currentNode.props"></PropsArea></template>
          <template #event><EventArea v-if="currentNode" :currentNode="currentNode" :dataScope="currentNode.props"></EventArea></template>
          <template #style><StyleArea v-if="currentNode" :currentNode="currentNode" :dataScope="currentNode.props"></StyleArea></template>
          <template #layer><LayerArea :vnode="vnode"></LayerArea></template>
          <template #tag><TagArea :vnode="vnode"></TagArea></template>
        </SliderTabLayout>
      </div>
      <EditorArea :vnode="vnode" @changeSelectNode="setNode" :data-scope="formData"></EditorArea>
    </div>
    <div class="footer"></div>
  </div>
</template>

<style scoped lang="scss">
.grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 25px 1fr 25px;
}

.header {
  border-bottom: 1px solid #e5e5e5;
}
.center {
  height: 100%;
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 400px 1fr;
}
//.center-left {
//  width: 340px;
//  height: 100%;
//  position: absolute;
//  left: 0;
//  top: 0;
//  z-index: 2;
//}
//.center-right {
//  width: 450px;
//  height: 100%;
//  position: absolute;
//  right: 0;
//  top: 0;
//  z-index: 2;
//}
.footer {
  border-top: 1px solid #e5e5e5;
}
</style>
